<template>
	<div class="topBar">
		<div>
			<p v-bind:class="{'logo': $store.state.isCollapse, 'logo1': !$store.state.isCollapse}">
				{{$store.state.isCollapse}}
			</p>
			<el-menu class="el-menu-demo btn">
				<i class="icon iconfont icon-caidan" @click="$store.commit('toggle')""></i>
			</el-menu>
		</div>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	export default {
		name: 'topBar',
		store
	}
</script>

<style>
	.topBar {
		height: 60px;
		background: #564aa3;
		width: 100%;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	
	.logo {
		width: 200px;
		float: left;
		height: 60px;
		transition: all 0.2s ease;
	}
	
	.logo1 {
		width: 70px;
		float: left;
		height: 60px;
		transition: all 0.2s ease;
	}
	
	.btn {
		margin-top: 12px;
		width: 28px;
		height: 28px;
		float: left;
		color: #fff;
		background: none;
		border-bottom: 0;
		border-right: 0;
	}
	
	.btn .iconfont {
		font-size: 30px;
	}
</style>